<template>
  <div class="app-container">
    <!-- 添加或修改出差申请业务对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="编号" prop="id">
        <el-input v-model="form.numberNum" disabled style="width: 280px;" />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-select v-model="form.projectName"
                   :disabled="form.projectName"
                   placeholder="请选择" clearable>
          <el-option
            v-for="item in projectNameList"
            :key="item.projectName"
            :label="item.projectName"
            :value="item.projectName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出发地点" prop="originPlace">
        <el-input
          :disabled="isDisabled"
          v-if="form.originPlace"
          v-model="form.originPlace"
          placeholder="请输入出发地点"
        >
          <i
            v-if="!isDisabled"
            slot="suffix"
            class="el-icon-close"
            @click="loadMap1()"
            style="cursor: pointer;"
          ></i>
        </el-input>
        <el-cascader
          v-else
          size="large"
          :options="options"
          v-model="form.originPlace"
          @change="handleChangePlace1"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="出差地点" prop="destination">
        <el-input
          :disabled="isDisabled"
          v-if="form.destination"
          v-model="form.destination"
          placeholder="请输入出差地点"
        >
          <i
            v-if="!isDisabled"
            slot="suffix"
            class="el-icon-close"
            @click="loadMap2()"
            style="cursor: pointer;"
          ></i>
        </el-input>
        <el-cascader
          v-else
          size="large"
          :options="options"
          v-model="form.destination"
          @change="handleChangePlace2"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="开始日期" prop="startDate">
        <el-date-picker
          clearable
          v-model="form.startDate"
          type="datetime"
          value-format="yyyy-MM-dd"
          placeholder="请选择开始日期"
          :disabled="isDisabled"
          default-time="00:00:00"
          @change="dateChanged"
          :picker-options="pickerOptionStart"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endDate">
        <el-date-picker
          clearable
          v-model="form.endDate"
          type="datetime"
          value-format="yyyy-MM-dd"
          placeholder="请选择结束时间"
          default-time="23:59:59"
          :disabled="isDisabled"
          @change="dateChanged"
          :picker-options="pickerOptionEnd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="出差时长" prop="duration">
        <el-input v-model="form.duration" placeholder="出差时长必须大于0" :disabled="true" style="width: 225px"></el-input>
      </el-form-item>
      <el-form-item label="出差事由" prop="tripReason">
        <el-input v-model="form.tripReason" placeholder="请输入出差事由" :disabled="isDisabled" />
      </el-form-item>
      <el-form-item label="上传图片" prop="attachment">
        <image-upload v-model="form.attachment" :isDisabled="isDisabled" :limit="5"/>
      </el-form-item>
    </el-form>
    <div v-show="parentTaskId==null" class="dialog-footer" style="text-align:center">
      <el-button :loading="buttonLoading" size="small" type="info" @click="submitCallback">关闭</el-button>
      <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm" v-if="confirmVisible">提交</el-button>
    </div>
    <!-- 工作流开始 -->
    <verify ref="verifyRef"
            :taskId="taskId"
            @submitCallback="submitCallback" :componentName="componentName"
            :taskVariables="taskVariables"
            :deptId="dept.deptId"
            :sendMessage="sendMessage"></verify>
    <!-- 工作流结束 -->
  </div>
</template>

<script>
import {getFinanceTripApply} from "@/api/oa/financeTripApply";
import verify from "@/components/Process/Verify";
import {parseTime} from "@/utils/ruoyi";

export default {
  name: "TripApply",
  dicts: [],
  props: {
    businessKey: String, // 业务唯一标识
    parentTaskId: String, // 父级任务id
    taskId: String, // 任务id
    confirmVisible:{
      type: Boolean,
      default: true
    }
  },
  components: {
    verify
  },
  data() {
    return {
      componentName: "出差申请",
      processKey:"oa_human_trip",
      dept:"",
      projectNameList:[],
      //禁止编辑
      isDisabled: true,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 请假业务表格数据
      leaveList: [],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [
          {required: true, message: "主键ID不能为空", trigger: "blur"}
        ],
        projectName: [
          {required: true, message: "项目名称不能为空", trigger: "blur"}
        ],
        tripReason: [
          {required: true, message: "出差事由不能为空", trigger: "blur"}
        ],
        originPlace: [
          {required: true, message: "出发地点不能为空", trigger: "blur"}
        ],
        destination: [
          {required: true, message: "出差地点不能为空", trigger: "blur"}
        ],
        startDate: [
          {required: true, message: "开始时间不能为空", trigger: "blur"}
        ],
        endDate: [
          {required: true, message: "结束时间不能为空", trigger: "blur"}
        ],
        duration: [
          {required: true, message: "出差时长不能为空", trigger: "blur"}
        ]
      },
      taskVariables: undefined,
      //消息提醒
      sendMessage: {}
    };
  },
  watch: {
    businessKey: {
      immediate: true, // 很重要！！！
      handler(newVal) {
        if (newVal) {
          this.getById()
        }
      }
    }
  },
  mounted() {
    if (this.$store.state.user.roles[0]=="common"||this.$store.state.user.roles[0]=="board"){
      this.dept=this.$store.state.user.dept?this.$store.state.user.dept:"";
    }
  },
  methods: {
    submitCallback() {
      this.$emit("closeForm")
    },
    async getById() {
      const {data} = await getFinanceTripApply(this.businessKey)
      this.form = data;
      if (data.actBusinessStatus.createTime) {
        this.form.numberNum =
          this.processKey +
          "@" +
          parseTime(data.actBusinessStatus.createTime, "{y}{m}{d}{h}{i}{s}");
      }
    },
    /** 提交按钮 */
    submitForm() {
      getFinanceTripApply(this.businessKey).then(response => {
        this.taskVariables = {
          entity: response.data,
          userRole: this.$store.state.user.roles[0]
        };
        this.sendMessage = {
          title: "出差申请审批提醒",
          messageContent: this.$store.state.user.nickName + "审批通过了出差申请"
        };
      });
      this.$refs.verifyRef.visible = true
      this.$refs.verifyRef.reset()
    }
  }
};
</script>
